<template>
	<div class="swiper">
		  <swiper :options="swiperOption" >
		    <!-- slides -->
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		    <swiper-slide><img src="https://imgs.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg"/></swiper-slide>
		  
		    <div class="swiper-pagination"  slot="pagination"></div>
		  </swiper>

	</div>
</template>

<script>
 export default {
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay:true
        }
      }
    }
   }
</script>

<style>
	.swiper{
		width: 100%;
		height: 1rem;
	}
	.swiper img{
		width: 100%;
		height: 100%;
	}
	.swiper-pagination-bullet-active{
		background: #FFFFFF;
	}
</style>